<template>
  <div style="background-color:rgb(11,21,39)">
    <bar-3d
      width="400px"
      height="300px"
      :xAxis="{data: ['2017', '2018', '2019', '2020'], color: 'gray'}"
      :yAxis="{color: 'gray', name: '万'}"
      :series="[{name: '品类一', data: [430, 430, 500, 650], color: ['rgb(65, 206, 211)', 'rgb(65, 206, 211, .3)']}, {name: '品类二', data: [20, 400, 450, 900], color: ['rgb(65, 255, 211)', 'rgb(65, 255, 211, .3)']}]"
      :xy="[15, 6]"
      :showLegend="true"
      :showBoxTip="true"
      :showTopTipNumber="true"
    >
    </bar-3d>

    <bar-3d
      width="400px"
      height="300px"
      :xAxis="{data: ['2017', '2018', '2019', '2020'], color: 'gray'}"
      :yAxis="{color: 'gray', name: '万'}"
      :series="[{name: '品类二',data: [100, 430, 500, 650], color: ['rgb(79, 219, 251)', 'rgb(54, 151, 176, .5)']}]"
      :xy="[15, 5]"
      :showLegend="true"
      type="cylinder"
    ></bar-3d>
    <div style="position:absolute;top:200px;right:50px;">
      <bar-3d
        width="400px"
        height="300px"
        :xAxis="{data: ['2017', '2018', '2019', '2020'], color: 'gray'}"
        :yAxis="{color: 'gray', name: '万'}"
        :series="[{data: [430, 430, 500, 650], color: ['rgb(79, 219, 251)', 'rgb(54, 151, 176, .5)']}]"
        :xy="[15, 5]"
        :showTopTipNumber="true"
        type="cylinder"
        direction="horizontal"
      ></bar-3d>
    </div>
  </div>
</template>

<script>
import Bar3d from "../../components/bar-3d";
export default {
  components: { 'bar-3d': Bar3d }
}
</script>

<style>

</style>